<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html>
	<head>
		<title>jScrollPane scroll event example</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<style type="text/css">
			body {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 80%;
			}
			.holder {
				float: left;
				margin: 10px;
			}
			.scroll-pane {
                position: relative;
				width: 200px;
				height: 300px;
				overflow: auto;
				background: #ccc;
				float: left;
			}
			
		</style>
		<link rel="stylesheet" type="text/css" media="all" href="jScrollPane.css" />
		<script type="text/javascript" src="firebug/firebug.js"></script>
		<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
		<script type="text/javascript" src="jquery.dimensions.min.js"></script>
		<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
		<script type="text/javascript" src="jScrollPane.js"></script>
		<script type="text/javascript">
			
			$(function()
			{
				// this initialises the demo scollpane on the page.
				$('#pane1').jScrollPane();
				
				$('.scroll-pane').bind(
					'scroll',
					function(event)
					{
						console.log(event.target);
					}
				)
				
			});
			
		</script>
	</head>
	<body>
		<h1>jScrollPane scroll event example</h1>
		<p id="intro">
			This demo shows how jScrollPane now dispatches a "scroll" event whenever
			you scroll it in the same way as a native overflowing div does. It also
			shows you how to bind to that event...
		</p>
		<p>
			You will need to use <a href="http://www.getfirebug.com">Firebug</a> to see the
			output although I have included <a href="http://www.getfirebug.com/lite.html">Firebug
			Lite</a> on this page as well so you can test this functionality in browsers other than
			Firefox. Simply open up firebug (press F12) and scroll the divs to see what happens...
		</p>
		<div class="holder">
			<h3>#pane1 (default)</h3>
			<div id="pane1" class="scroll-pane">
				<p>&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl. Integer quis tellus nec turpis placerat scelerisque. In semper lacus eu nisi. Praesent dignissim metus sit amet enim. Nam auctor, neque semper congue sagittis, risus mi commodo pede, nec euismod magna libero at sem. In enim magna, vestibulum et, blandit sit amet, tempor vel, ligula. Phasellus ante augue, congue vitae, faucibus quis, gravida sit amet, diam. Nullam congue accumsan magna. Etiam a nunc. Aliquam elit urna, ornare vitae, ultrices et, tempus non, nisl. Duis eros neque, luctus quis, interdum ultricies, auctor eu, urna. Donec nibh. Integer in purus tempus mi venenatis mollis. Cras nunc odio, porttitor at, accumsan ac, adipiscing vitae, ante.</p>
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent turpis. Suspendisse molestie, neque non congue ullamcorper, neque sem consequat nisl, eget pulvinar odio erat et tellus. Nunc luctus convallis dolor. Nullam non mauris. Etiam nisi magna, adipiscing eu, nonummy ac, laoreet nec, est. Pellentesque tristique, est vel condimentum feugiat, nisi justo rhoncus pede, in pulvinar mauris lectus vitae dui. Pellentesque scelerisque. Vestibulum tellus dolor, porta quis, facilisis nec, convallis vitae, quam. Quisque nisi. Nunc vitae nulla vel turpis mollis molestie. Etiam vitae massa.&lt;</p>
			</div>
		</div>
		<div class="holder">
			<h3>#pane2 (normal overflowing div)</h3>
			<div id="pane2" class="scroll-pane">
				<p>&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl. Integer quis tellus nec turpis placerat scelerisque. In semper lacus eu nisi. Praesent dignissim metus sit amet enim. Nam auctor, neque semper congue sagittis, risus mi commodo pede, nec euismod magna libero at sem. In enim magna, vestibulum et, blandit sit amet, tempor vel, ligula. Phasellus ante augue, congue vitae, faucibus quis, gravida sit amet, diam. Nullam congue accumsan magna. Etiam a nunc. Aliquam elit urna, ornare vitae, ultrices et, tempus non, nisl. Duis eros neque, luctus quis, interdum ultricies, auctor eu, urna. Donec nibh. Integer in purus tempus mi venenatis mollis. Cras nunc odio, porttitor at, accumsan ac, adipiscing vitae, ante.</p>
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent turpis. Suspendisse molestie, neque non congue ullamcorper, neque sem consequat nisl, eget pulvinar odio erat et tellus. Nunc luctus convallis dolor. Nullam non mauris. Etiam nisi magna, adipiscing eu, nonummy ac, laoreet nec, est. Pellentesque tristique, est vel condimentum feugiat, nisi justo rhoncus pede, in pulvinar mauris lectus vitae dui. Pellentesque scelerisque. Vestibulum tellus dolor, porta quis, facilisis nec, convallis vitae, quam. Quisque nisi. Nunc vitae nulla vel turpis mollis molestie. Etiam vitae massa.&lt;</p>
			</div>
		</div>
	</body>
</html>